<template>
  <view class="page-body">
	  <u-navbar :is-back="false" title="订单列表"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>
	  
    <u-tabs :list="list" class="" :is-scroll="false" active-color="#1677FF" inactive-color="#666666"
      :current="info.value.OrderStatus" @change="change">
    </u-tabs>
	<u-sticky style="height: 110upx;"  bg-color="#F8F9FC">	
	  <view class="topsearch el-flex  fff">
	    <u-button size="mini"
	      @click="timeDialog=true">
	      {{info.value.VTime ||'选择时间'}}
	      <u-icon name="arrow-down-fill">
	      </u-icon>
	    </u-button>
	    <u-picker mode="time" v-model="timeDialog"
	      @confirm="changeDate"></u-picker>
	    <view class="x-col-center x-col">
	      <view class="search">
	        <u-search placeholder="请输入搜索客户名称"
	          @change="changeSearch"
	          shape="square" bg-color="#fff"
	          :show-action="false" height="70"
	          v-model="info.value.Key">
	        </u-search>
	      </view>
	    </view>	    
	  </view>
	</u-sticky>
	
	
    <view class="u-skeleton" style="height: 16rpx;">
    </view>
    <u-empty text="暂无数据" mode="list" v-if="!clist.length">
    </u-empty>
	
	<view class="slot-content">
	  <u-table>
	    <u-tr class="u-tr">
		 <u-th class="u-th" >序号</u-th>
	      <u-th class="u-th" >客户名称</u-th>
		    <u-th class="u-th" >业务员</u-th>
	      <u-th class="u-th" >金额</u-th>
	      <u-th class="u-th" >状态</u-th>
	     
	  
	    </u-tr>
	    <u-tr class="u-tr" @click="toDetail(li)" v-for="(li,index) in clist" :key="index">
		 <u-td class="u-td">{{li.fId}}</u-td>
	      <u-td class="u-td">
		  <navigator :url="`/pages/sale/order_detail?id=${li.fId}&taskId=${li.fTaskId}&status=order`">
		  {{li.fMrkName}}
		  </navigator>
		  
		 </u-td>
		 <u-td class="u-td" >{{li.fUserName}}</u-td>
	      <u-td class="u-td">{{li.fMoney}}</u-td>
	      <u-td class="u-td">   <view :class="li.fStatus==10?'yi':'wei'">
		     {{$api.getOrderStatus(li.fStatus)}}
		   </view></u-td>
	   
	    </u-tr>
	  </u-table>
	</view>
	<view>
		
	订单：{{allCount}} 个 合计：{{allMoney}} 元 已收款：{{PayMoney}} 元(现金：{{PayCash}} ,微信：{{PayWeiXin}},银行转账：{{PayBank}})
	</view>
	
    
  </view>
</template>

<script>
import { orderStatus } from '@/util/setting'
import orlist from '../../components/orlist'
export default {
  components: {
    orlist
  },
  onShareAppMessage() {},
  data() {
    return {
      list: Object.values(orderStatus).map(x => ({ name: x })),
      current: 0,
	  taskDate: '选择时间',
	  timeDialog: false,
      clist: [],
      isAllList: 1,
      page: 1,
      status: 'loading',
      loading: true,
      keywords: '',
	  allMoney:0,
      PayMoney:0,
	  PayCash:0,
	  PayWeiXin:0,
	  PayBank:0,
	  allCount:0,
      info: {
        PageSize: 100,
        PageIndex: 1,
        value: {
          MrkId: 0,
          OrderStatus: 0,
          OrderType: 0,
		  VTime:'',
          Key: ''
        }
      }
    }
  },
  onReachBottom() {
    if (this.isAllList != 0) {
      this.info.PageIndex += 1
      this.getList()
    }
  },
  onLoad()
  {
	  this.defaultData()
	    this.getList()
  },
  onShow() {
	  
	 // var d = new Date()
	 // this.taskDate = '${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}'
	  
	//   this.info.value.VTime = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`

  //  uni.setNavigationBarTitle({
  //    title: '我的订单'
  //  })
  //  this.defaultData()
  //  this.getList()
  },
  methods: {
    toDetail(e) {
      this.$api.navigator('order_detail?orderid=' + e.id)
    },
    change(e) {
      this.info.value.OrderStatus = e
      this.defaultData()
      this.getList()
    },
	changeSearch() {
	 this.defaultData()
	 this.getList()
	},
	changeDate(e) {
	  this.info.value.VTime = `${e.year}-${e.month}-${e.day}`
	  this.defaultData()
   	  this.getList()
	},
    defaultData() {
		this.allMoney=0
		this.PayMoney=0
		this.PayCash=0
		this.PayWeiXin=0
		this.PayBank=0
		this.allCount=0
		
		
      this.clist = []
      this.isAllList = 1
      this.info.PageIndex = 1
      this.status = 'loading'
      this.loading = true
    },
    getList() {
      let that = this
      this.$axios('api/OrderBasic/MyListPaged', 'post', this.info).then(res => {
        if (!res.Value.List.length) this.isAllList = 0
        res.Value.List.forEach(x => {
          x.img = this.urlimg + x.fPic
          x.id = x.fMrkId
          x.name = x.fMrkName
		  this.allMoney +=x.fMoney
		  this.PayMoney +=x.deypaymoney
		  this.PayCash +=x.deypaycash
		  this.PayWeiXin +=x.deypayweixin
		  this.PayBank +=x.deypaybank
		  
        })
		this.allCount=res.Value.TotalCount
		
        that.loading = false
        that.clist.push(...res.Value.List)
      })
    }
  }
}
</script>

<style lang="scss">
.clist {
  margin-bottom: 16rpx;
  background-color: #ffffff;

  .top {
    padding: 34rpx 32rpx;
    box-sizing: border-box;

    .code {
      font-size: 32rpx;
      font-weight: 500;
      color: #34404a;
    }

    .state {
      font-size: 30rpx;
      font-weight: 400;
      color: #2b88fe;
    }
  }

  .info {
    padding: 32rpx 32rpx 16rpx 32rpx;
    box-sizing: border-box;

    .itxt {
      padding-bottom: 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #34404a;
      line-height: 40rpx;
    }

    .photoShowIcon {
      width: 64rpx;
      height: 64rpx;
    }
  }

  .store {
    padding: 24rpx 32rpx;
    box-sizing: border-box;

    .simg {
      width: 56rpx;
      height: 56rpx;
      margin-right: 24rpx;
      background-color: #f2f2f2;
      border-radius: 10rpx;
    }

    .sname {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
      line-height: 36rpx;
      padding: 0 20rpx 0 0;
    }

    .pay {
      width: 144rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #1677ff;
      border-radius: 32rpx;
      border: 1rpx solid #2b88fe;
    }
  }
}
.u-tr{height:auto !important;padding-bottom: 2rpx;padding-top: 2rpx;}
.u-td{height:auto !important;}
page {
  background: #f8f9fc;
}
</style>
